<template>
	<view style="display: flex;flex-direction: column; height: 2700rpx;background-color: #eaeaea;">
		<!-- 定位 -->
		<div style="display: flex;flex-direction: row;padding: 6rpx;background-color: #aaaaff;">
			<img src="/static/定位1.png" style="width: 20px;height: 20px;"></img>
			<div style="display: flex;flex-direction: row;width: 100%;height: 50rpx;">
				<div>北海职业学院</div>
				<img src="/static/向下.png" style="width: 35rpx;height: 35rpx;">
			</div>
			<img src="/static/扫码.png" style="width: 50rpx;height: 50rpx;">
		</div>
		<!-- 搜索 -->
		<div>
			<div>
				<div style="display: flex;justify-content: center;background-color: #aaaaff;">
					<input type="text" value="Q新鲜,搜索一下就出来了" style="border: 1rpx solid;width: 90%;height: 65rpx;
				 background-color: #ffffff; border-radius: 30rpx;padding-left: 30rpx;">
				</div>
			</div>
		</div>
		<!-- 轮播图 -->
		<div style="width: 100%;height: 300rpx;background-color: #ffffff;position: relative;">
			<!-- <img src="/static/2.png" style="width: 90%; height: 70%;margin-left: 5%;position: absolute;top: 7%;border-radius: 40rpx;"> -->

			<!-- 免费配送 -->
			<!-- <div style="display: flex;flex-direction: row;
			justify-content: space-around;background-color: #ffffff;
			height: 60rpx;align-items: center;margin-top: 12%;">
				<div v-for="(item,index) in mian" :key="index">
					<span style="padding: 1rpx;">
						<img :src="item.tpdz" alt="" style="width: 23rpx;height: 30rpx;">
					</span>
				<span>
				{{item.mfname}}
				</span>
				</div>
				
			</div> -->
			<div style="background-color: #aaaaff;width: 100%;height: 60%; position: absolute;top: 0px;"></div>
			<swiper :indicator-dots="true" indicator-active-color="#ffaa7f" :autoplay="true" :interval="3000"
				:duration="1000" style="padding: 0px 30rpx;margin-top: 4%;">
				<swiper-item style="border-radius: 60rpx;">
					<image src="/static/美女.jpg" style="height: 200px;width: 700rpx;"></image>
				</swiper-item>
				<swiper-item style="border-radius: 60rpx;">
					<image
						src="https://img0.baidu.com/it/u=2813255285,4147109851&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
						style="height: 200px;width: 700rpx;"></image>
				</swiper-item>
				<swiper-item style="border-radius: 60rpx;">
					<image
						src="https://img2.baidu.com/it/u=3529812522,165675595&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
						style="height: 200px;width: 700rpx;"></image>
				</swiper-item>
			</swiper>


			<!-- 免费配送 -->
			<div style="display: flex;flex-direction: row;
		justify-content: space-around;background-color: #ffffff;
		height: 60rpx;align-items: center;margin-top: 3%;">
				<div v-for="(item,index) in mian" :key="index">
					<span style="padding: 1rpx;">
						<img :src="item.tpdz" alt="" style="width: 23rpx;height: 30rpx;">
					</span>
					<span>
						{{item.mfname}}
					</span>
				</div>
			</div>
		</div>
		<!-- 生鲜 -->
		<div style="background-color: #ffffff;display: flex;justify-content: space-around;margin-top: 21%;">
			<img src="/static/水果.png" style="width: 90%;height: 160rpx;border-radius: 40rpx;">
		</div>
		<!-- 推荐栏 -->
		<div @click="hh()" style="flex-wrap: wrap;display: flex;flex-direction: row;background-color: #ffffff;">
			<div style="width: 150rpx;align-items: center;margin-top:16px;display: flex;flex-direction: column;"
				:id="'/pages/log/log?title='+item.name+'&url='+item.id" v-for="item in me">
				<image style="width: 50px;height: 50px;margin-bottom: 16px;" :src="item.tplj"></image>
				<!-- <view style="margin-bottom: 16px;" class=""></view> -->
				<view class="font22">{{item.name}}</view>
			</div>
		</div>
		<!-- <div style="display: flex;justify-content: space-around;">
			<div style="background-color: #ffffff;width: 100%;">
				<div style="width: 100%;">
					<div style="display: flex;flex-direction: row;
					justify-content: space-around;background-color: #ffffff;
					height: 30rpx;align-items: center;">
		<div style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;height: 30%;">
			<div v-for="(item,index) in me" :key="index">
			<span style="padding: 20rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<div style="display: flex;justify-content: center;">
					<img :src="item.tplj" style="width: 90rpx;height: 90rpx;">
				</div>
				<span style="font-size: 10%;">
					{{item.name}}
				</span>
			</span>
			</div>
		</div>
		</div>
		</div>
		<!-- 今日特价 -->
		<div @click="aa()">
			<img src="/static/今日特价.png" style="width: 100%;height: 100rpx;margin-top: 10%;">
		</div>
		<!-- </div> -->
		<!-- 货架 -->
		<div class="hj">
			<!-- 短袖 -->
			<div class="dx">
				<div v-for="(item,index) in huojia" :key="index">
					<span
						style="padding: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<div @click="abc()" style="display: flex;justify-content: center;">
							<img :src="item.duanxiu" style="width: 150rpx;height: 150rpx;">
						</div>
						<div style="margin-top: 15%;width: 100%;">
							<span style="font-size: 10%;padding-right: 110rpx;">
								{{item.zip}}
							</span>
							<div style="padding-right: 100rpx;display: flex;flex-direction: row;font-size: 50%;">
								{{item.yuan}}
								<div style="padding-left: 110rpx;">
									<img :src="item.wangzai" style="width: 30rpx;height: 30rpx;">
								</div>
							</div>
						</div>
					</span>
				</div>
			</div>
			<!-- 秋衣 -->
			<div class="qy">
				<div v-for="(item,index) in huojia1" :key="index">
					<span
						style="padding: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<div @click="abc()" style="display: flex;justify-content: center;">
							<img :src="item.qiuyi" style="width: 150rpx;height: 150rpx;">
						</div>
						<div style="margin-top: 15%;width: 100%;">
							<span style="font-size: 10%;padding-right: 110rpx;">
								{{item.abz}}
							</span>
							<div style="padding-right: 100rpx;display: flex;flex-direction: row;font-size: 50%;">
								{{item.qan}}
								<div style="padding-left: 110rpx;">
									<img :src="item.gowu" style="width: 30rpx;height: 30rpx;">
								</div>
							</div>
						</div>
					</span>
				</div>
			</div>
			<!-- 上衣 -->
			<div class="sy">
				<div v-for="(item,index) in huojial" :key="index">
					<span
						style="padding: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<div @click="abc()" style="display: flex;justify-content: center;">
							<img :src="item.duanxiul" style="width: 150rpx;height: 150rpx;">
						</div>
						<div style="margin-top: 15%;width: 100%;">
							<span style="font-size: 10%;padding-right: 110rpx;">
								{{item.zipl}}
							</span>
							<div style="padding-right: 100rpx;display: flex;flex-direction: row;font-size: 50%;">
								{{item.yuanl}}
								<div style="padding-left: 110rpx;">
									<img :src="item.wangzail" style="width: 30rpx;height: 30rpx;">
								</div>
							</div>
						</div>
					</span>
				</div>
			</div>
		</div>
		<!-- 猪肉 -->
		<div style="display: flex;justify-content: center;">
			<div style="width: 90%;height: 200rpx;background-color: #ffffff;display: flex;justify-content: center;">
				<img src="/static/猪肉.png" style="width: 95%;height: 200rpx;">
			</div>
		</div>
		<!-- 羽绒服 -->
		<div class="hj1">
			<!-- 小羽绒服 -->
			<div class="yr">
				<div v-for="(item,index) in jk" :key="index">
					<span
						style="padding: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<div @click="abc()" style="display: flex;justify-content: center;">
							<img :src="item.jksn" style="width: 250rpx;height: 230rpx;">
						</div>
						<div style="width: 88%;">
							<span style="font-size: 70%;">
								{{item.yrf}}
							</span>
							<div style="font-size: 70%;">
								<div style="color: #757575;">
								{{item.yuro}}
								</div>
							<div style="display: flex;flex-direction: row;font-size: 100%;">
								{{item.wuyuan}}
								<div style="padding-left: 200rpx;">
									<img :src="item.gomai" style="width: 30rpx;height: 30rpx;">
								</div>
							</div>
							</div>
						</div>
					</span>
				</div>
			</div>
			<!-- 中羽绒服 -->
			<div class="yr1">
				<div v-for="(item,index) in jk1" :key="index">
					<span
						style="padding: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<div @click="abc()" style="display: flex;justify-content: center;">
							<img :src="item.jksn1" style="width: 250rpx;height: 230rpx;">
						</div>
						<div style="margin-top: 0%;width: 88%;">
							<span style="font-size: 70%;">
								{{item.yrf1}}
							</span>
							<div style="font-size: 70%;">
								<div style="color: #757575;">
								{{item.yuro1}}
								</div>
							<div style="display: flex;flex-direction: row;font-size: 100%;">
								{{item.wuyuan1}}
								<div style="padding-left: 200rpx;">
									<img :src="item.gomai1" style="width: 30rpx;height: 30rpx;">
								</div>
							</div>
							</div>
						</div>
					</span>
				</div>
			</div>
		</div>
		<!-- 少萝 -->
		<div class="hj2">
			<!-- jk -->
			<div class="ht">
				<div v-for="(item,index) in jk2" :key="index">
					<span
						style="padding: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<div @click="abc()" style="display: flex;justify-content: center;">
							<img :src="item.jksn2" style="width: 250rpx;height: 230rpx;">
						</div>
						<div style="margin-top: 0%;width: 88%;">
							<span style="font-size: 70%;">
								{{item.yrf2}}
							</span>
							<div style="font-size: 70%;">
								<div style="color: #757575;">
								{{item.yuro2}}
								</div>
							<div style="display: flex;flex-direction: row;font-size: 100%;">
								{{item.wuyuan2}}
								<div style="padding-left: 200rpx;">
									<img :src="item.gomai2" style="width: 30rpx;height: 30rpx;">
								</div>
							</div>
							</div>
						</div>
					</span>
				</div>
			</div>
			<!-- jk -->
			<div class="xg">
				<div v-for="(item,index) in jk3" :key="index">
					<span
						style="padding: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<div @click="abc()" style="display: flex;justify-content: center;">
							<img :src="item.jksn3" style="width: 250rpx;height: 230rpx;">
						</div>
						<div style="margin-top: 0%;width: 88%;">
							<span style="font-size: 70%;">
								{{item.yrf3}}
							</span>
							<div style="font-size: 70%;">
								<div style="color: #757575;">
								{{item.yuro3}}
								</div>
							<div style="display: flex;flex-direction: row;font-size: 100%;">
								{{item.wuyuan3}}
								<div style="padding-left: 200rpx;">
									<img :src="item.gomai3" style="width: 30rpx;height: 30rpx;">
								</div>
							</div>
							</div>
						</div>
					</span>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mian: [{
						id: 1,
						mfname: '免费配送',
						tpdz: '/static/外卖车.png'
					},
					{
						id: 1,
						mfname: '晚到必赔',
						tpdz: '/static/订单编号.png'
					},
					{
						id: 1,
						mfname: '专业检测',
						tpdz: '/static/检测合格.png'
					},
					{
						id: 1,
						mfname: '30分钟送达',
						tpdz: '/static/物流管理.png'
					},
				],
				// list: [{
				// 						url: "https://api.8uid.cn/ng.php?type=video",
				// 						title: '如沐清风',
				// 						image: '/static/头像 女孩.svg'
				// 					},
				// 					{
				// 						url: "https://api.8uid.cn/qc.php?type=video",
				// 						title: '繁花似锦',
				// 						image: '/static/头像 女孩 (1).svg'
				// 					},
				// 					{
				// 						url: "https://api.8uid.cn/cd.php?type=video",
				// 						title: '花好月圆',
				// 						image: '/static/头像 女孩 (2).svg'
				// 					},
				// 					{
				// 						url: "https://api.8uid.cn/tm.php?type=video",
				// 						title: '一叶知秋',
				// 						image: '/static/头像 女孩 (3).svg'
				// 					},
				// 					{
				// 						url: "https://api.8uid.cn/sl.php?type=video",
				// 						title: '秋月春风',
				// 						image: '/static/头像 女孩 (4).svg'
				// 					},
				// 					{
				// 						url: "https://api.8uid.cn/dd.php?type=video",
				// 						title: '金风玉露',
				// 						image: '/static/头像 女孩 (5).svg'
				// 					},
				// 					{
				// 						url: "https://www.mnapi.cn/sg.php?type=video",
				// 						title: '浩然之气',
				// 						image: '/static/头像 男孩.svg'
				// 					},
				// 					{
				// 						url: "https://api.8uid.cn/ng.php?type=video",
				// 						title: '气宇轩昂',
				// 						image: '/static/头像 男孩 (1).svg'
				// 					},
				// 					{
				// 						url: "https://api.8uid.cn/ecy.php?type=video",
				// 						title: '锦绣河山',
				// 						image: '/static/头像 男孩 (2).svg'
				// 					},
				// 					{
				// 						url: "https://api.8uid.cn/ng.php?type=video",
				// 						title: '壮志凌云',
				// 						image: '/static/头像 男孩 (3).svg'
				// 					},
				// 				]
				me: [
					{ id: 1, name: '今日推荐', tplj: '/static/今日推荐.png' },
					{ id: 2, name: '时尚短袖', tplj: '/static/时尚短袖.png' },
					{ id: 3, name: '今日火爆', tplj: '/static/今日火爆.png' },
					{ id: 4, name: '今日必买', tplj: '/static/今日必买.png' },
					{ id: 5, name: '邀请有礼', tplj: '/static/邀请有礼.png' },
					{ id: 6, name: '懒人菜单', tplj: '/static/懒人菜单.png' },
					{ id: 7, name: '疯狂折扣', tplj: '/static/疯狂折扣.png' },
					{ id: 8, name: '团购商品', tplj: '/static/团购商品.png' },
					{ id: 9, name: '掌柜推荐', tplj: '/static/掌柜推荐.png' },
					{ id: 10, name: '精品推荐', tplj: '/static/精品推荐.png' }
				],
				huojia: [
					{ duanxiu: 'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', zip: '短袖',yuro:'羽绒服', yuan: '$5', wangzai: '/static/add.png' }
				],
				huojia1: [
					{ qiuyi: 'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', abz: '秋衣', qan: '$1', gowu: '/static/add.png' }
				],
				huojial: [
					{ duanxiul: 'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', zipl: '上衣', yuanl: '$9', wangzail: '/static/add.png' }
				],
				jk: [
					{ jksn: 'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', yrf: '羽绒服',yuro:'羽绒服', wuyuan: '$5', gomai: '/static/add.png' }
				],
				jk1: [
					{ jksn1: 'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', yrf1: '大羽绒服',yuro1:'大羽绒服', wuyuan1: '$9', gomai1: '/static/add.png' }
				],
				jk2: [
					{ jksn2: 'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', yrf2: '少萝',yuro2:'jk', wuyuan2: '$3', gomai2: '/static/add.png' }
				],
				jk3: [
					{ jksn3: 'https://img1.baidu.com/it/u=1279582640,2248831019&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', yrf3: '少萝皇',yuro3:'jk', wuyuan3: '$8', gomai3: '/static/add.png' }
				],
				
			}
		},
		methods: {
			hh() {
				uni.navigateTo({
					url: '/pages/live/live'
				})
			},
			aa(){
				uni.navigateTo({
					url:'/pages/licai/licai'
				})
			},
			abc(){
				uni.navigateTo({
					url:'/pages/fenlie/fenlie'
				})
			}
		}
	}

</script>

<style>
	.hj {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 350rpx;
		background-color: #e8e8e8;
		justify-content: space-around;
		align-items: center;
	}

	.dx {
		display: flex;
		flex-direction: column;
		border: 1rpx;
		width: 25%;
		height: 280rpx;
		background-color: #ffffff;
	}

	.qy {
		display: flex;
		flex-direction: column;
		border: 1rpx;
		width: 25%;
		height: 280rpx;
		background-color: #ffffff;
	}

	.sy {
		display: flex;
		flex-direction: column;
		border: 1rpx;
		width: 25%;
		height: 280rpx;
		background-color: #ffffff;
	}

	.hj1 {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 400rpx;
		background-color: #ececec;
		justify-content: center;
		align-items: center;


	}

	.yr {
		display: flex;
		flex-direction: column;
		border: 1rpx;
		width: 40%;
		height: 360rpx;
		background-color: #ffffff;
		margin-right: 5%;
	}

	.yr1 {
		display: flex;
		flex-direction: column;
		border: 1rpx;
		width: 40%;
		height: 360rpx;
		background-color: #ffffff;
		margin-left: 5%;
	}

	.hj2 {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 400rpx;
		background-color: #ececec;
		justify-content: center;
		align-items: center;


	}

	.ht {
		display: flex;
		flex-direction: column;
		border: 1rpx;
		width: 40%;
		height: 360rpx;
		background-color: #ffffff;
		margin-right: 5%;
	}

	.xg {
		display: flex;
		flex-direction: column;
		border: 1rpx;
		width: 40%;
		height: 360rpx;
		background-color: #ffffff;
		margin-left: 5%;
	}

</style>

